<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器举例</title>
    <style>
        .selected{
        border: 1px solid red;
        background-color: yellow;
       }
    </style>
    <script>
        function btnQuery() {

            let textNodes = document.querySelector("#CSSSelector").value;
            let mainNode = document.getElementsByTagName("main")[0];
            let nodes = mainNode.querySelectorAll(textNodes);
            let deleted = mainNode.querySelectorAll("[class~=selected]");
            Array.from(deleted).forEach((items) => {
                items.classList.remove("selected");
            });
            Array.from(nodes).forEach((items) => {
                items.classList.add("selected");
            });
            // classList有四种方法
            // add(String) 添加一个类名
            // remove(String) 删除一个类名
            // contains(String)  是否包含这个类名，包含返回true，不包含返回false
            // toggle(String)  如果半酣这个类名就删除它，如果不包含添加它 
        }
        function init() {
            document.getElementById("btn").addEventListener("click", btnQuery, false);

        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    css选择器<input type="text" id="CSSSelector" name="CSSSelector">
    <input type="button" value="查询" id="btn">
    <main>
        <section id="sec" class="sec">

            <nav class="nav"></nav>
            <article class="art"> </article>
            <div>第一个盒子
                <p>这是盒子里的一个段落</p>
            </div>
            <div>第二个盒子</div>
            <div>第三个盒子</div>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <a href="#">这是第一个链接</a>
            <a href="#">这是第二个链接</a>
            <a href="#">这是第三个链接</a>
        </section>
        <input type="text">
    </main>
</body>

</html>